<template>
    <el-form 
        :inline="data.inline ? data.inline : true" 
        :model="data" 
        :ref="obj"
        :class="'tooua-form ' + className" 
        :size="size">
        <template v-for="(fm,i) in data.list">
            <el-form-item 
                :label="fm.nm + '：'" 
                :key="i" 
                v-if="fm.tp == 'input'"  
                :label-width=" textVal(fm.nm) +'px'" 
                :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []"
            >
                <el-input 
                    v-model="fm.va" 
                    type="text"
                    :placeholder="fm.pe != '' && fm.pe ? fm.pe : '请输入内容'" 
                    :disabled="fm.bd ? fm.bd : false"
                    :clearable="fm.cr"
                    :show-password="fm.pw"
                    :suffix-icon="fm.ia"
                    :prefix-icon="fm.ib"
                    :maxlength="fm.xl ? fm.xl : null"
                    :minlength="fm.ml"   
                    @focus="fm.ff ? fm.ff() : ''"
                    @input="fm.cf ? fm.cf() : ''"
                ></el-input>
            </el-form-item>

            <el-form-item :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []" :key="i" v-if="fm.tp == 'comInput'">
                <el-input v-model="fm.va" 
                    :placeholder="fm.pe != '' && fm.pe ? fm.pe : '请输入内容'" 
                    :disabled="fm.bd ? fm.bd : false"
                    :clearable="fm.cr"
                    :show-password="fm.pw"
                    :suffix-icon="fm.ia"
                    :prefix-icon="fm.ib"
                    :maxlength="fm.xl ? fm.xl : null"
                    :minlength="fm.ml"   
                    @focus="fm.ff ? fm.ff() : ''"
                    @input="fm.cf ? fm.cf() : ''"
                >
                    <template v-if="fm.bn" slot="prepend">{{ fm.bn ? fm.bn : 'Http://' }}</template>
                    <template v-if="fm.bn" slot="append">{{ fm.bn ? fm.bn : '.com' }}</template>
                </el-input>
            </el-form-item>

            <el-form-item :key="i" v-if="fm.tp == 'null'" :label="'空项：'" :label-width="textVal('空项') +'px'" style="visibility: hidden;">
                <el-input 
                    type="text"
                    :disabled="true"
                ></el-input>
            </el-form-item>
            
            <el-form-item :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []" :label="fm.nm + '：'" :key="i" v-else-if="fm.tp == 'down'"  :label-width=" textVal(fm.nm) +'px'">
                <el-select 
                    v-model="fm.va" 
                    @change="fm.cg ? fm.cg() : ''" 
                    :placeholder="fm.pe != '' && fm.pe ? fm.pe : '请选择'"
                    :disabled="fm.db ? fm.db :false "
                    :multiple="fm.mt ? fm.mt :false "
                    :collapse-tags="fm.ct ? fm.ct :false "
                    :clearable="fm.cr ? fm.cr :false "
                    :filterable="fm.fr ? fm.fr :false "
                    :multiple-limit="fm.ml ? fm.ml :0 "
                >
                    <el-option key="111" v-if="fm.de" label="全部" value=""></el-option>
                    <el-option 
                        v-for="(fmd,ind) in fm.lt" 
                        :key="'select'+ind" 
                        :label="fmd.dicItemName || fmd.name" 
                        :value="fmd.dicItemCode || fmd.id"
                        :disabled="fmd.db?fmd.db:false"
                    ></el-option>
                    <!-- <el-option label="女" value="beijing"></el-option> -->
                </el-select>
            </el-form-item>

            <el-form-item :prop="'list.'+ i +'.iva'" :rules="fm.ru ? fm.ru : []" :label="fm.nm + '：'" :key="i" v-else-if="fm.tp == 'downInput'" :label-width=" textVal(fm.nm) +'px'">
                <el-input v-model="fm.iva" 
                    type="text"
                    class="input-with-select"
                    :placeholder="fm.ipe != '' && fm.ipe ? fm.ipe : '请输入内容'" 
                    :disabled="fm.ibd ? fm.ibd : false"
                    :clearable="fm.icr"
                    :show-password="fm.ipw"
                    :suffix-icon="fm.iia"
                    :prefix-icon="fm.iib"
                    :maxlength="fm.ixl ? fm.ixl : null"
                    :minlength="fm.iml"   
                    @focus="fm.iff ? fm.iff() : ''"
                    @input="fm.icf ? fm.icf() : ''"
                >
                    <el-select 
                        v-model="fm.va" 
                        :slot="fm.pn == 'before' ? 'prepend' : fm.pn == 'after' ? 'append' : 'prepend'"
                        @change="fm.cg ? fm.cg() : ''" 
                        :placeholder="fm.pe != '' && fm.pe ? fm.pe : '请选择'"
                        :disabled="fm.db ? fm.db :false "
                        :multiple="fm.mt ? fm.mt :false "
                        :collapse-tags="fm.ct ? fm.ct :false "
                        :clearable="fm.cr ? fm.cr :false "
                        :filterable="fm.fr ? fm.fr :false "
                        :multiple-limit="fm.ml ? fm.ml :0 "
                    >
                        <el-option key="111" v-if="fm.de" label="全部" value=""></el-option>
                        <el-option 
                            v-for="(fmd,ind) in fm.lt" 
                            :key="'select'+ind" 
                            :label="fmd.dicItemName || fmd.name" 
                            :value="fmd.dicItemCode || fmd.id"
                            :disabled="fmd.db?fmd.db:false"
                        ></el-option>
                        <!-- <el-option label="女" value="beijing"></el-option> -->
                    </el-select>

                    <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
                </el-input>
            </el-form-item>

            <el-form-item v-else-if="fm.tp == 'btn'" label-position="right" :key="i">
                <el-button :type="fm.sy ? fm.sy : ''"  :size="fm.sz ? fm.sz :''" :round="fm.rd ? fm.rd :false" @click="fm.cf">{{ fm.nm }}</el-button>
            </el-form-item>

            <el-form-item :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []" :label="fm.nm + '：'" :key="i" v-else-if="fm.tp == 'datetimerange'" :label-width=" textVal(fm.nm) +'px'">
                <el-date-picker 
                    v-model="fm.va" 
                    @input="fm.cf ? fm.cf() : ''"
                    type="datetimerange" 
                    :range-separator="fm.rs ? fm.rs : '-'" 
                    :start-placeholder="fm.pes != '' && fm.pes ? fm.pes : '开始日期时间'" 
                    :end-placeholder="fm.pee != '' && fm.pee ? fm.pee : '结束日期时间'" 
                    :default-time="fm.dt ? fm.dt :['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
            </el-form-item>

            <el-form-item :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []" :label="fm.nm + '：'" :key="i" v-else-if="fm.tp == 'daterange'"  :label-width=" textVal(fm.nm) +'px'">
                <el-date-picker 
                    v-model="fm.va" 
                    type="daterange" 
                    @input="fm.cf ? fm.cf() : ''"
                    :range-separator="fm.rs ? fm.rs : '-'" 
                    value-format="yyyy-MM-dd"
                    :start-placeholder="fm.pes != '' && fm.pes ? fm.pes : '开始日期'" 
                    :end-placeholder="fm.pee != '' && fm.pee ? fm.pee : '结束日期'"
                > </el-date-picker>
            </el-form-item>

            <el-form-item :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []" :label="fm.nm + '：'" :key="i" v-else-if="fm.tp == 'datetime'"  :label-width=" textVal(fm.nm) +'px'">
                <el-date-picker 
                    v-model="fm.va" 
                    @input="fm.cf ? fm.cf() : ''"
                    type="datetime" 
                    :placeholder="fm.pe != '' && fm.pe ? fm.pe : '日期时间'" 
                    :default-time="fm.dt ? fm.dt : ''"
                    value-format="yyyy-MM-dd HH:mm:ss"
                > </el-date-picker>
            </el-form-item>
            
            <el-form-item :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []" :label="fm.nm + '：'" :key="i" v-else-if="fm.tp == 'date'"  :label-width=" textVal(fm.nm) +'px'">
                    <el-date-picker 
                        v-model="fm.va" 
                        @input="fm.cf ? fm.cf() : ''"
                        :format="fm.fm ? fm.fm : 'yyyy - MM - dd'" 
                        value-format="yyyy-MM-dd" 
                        type="date"
                        :placeholder="fm.pe != '' && fm.pe ? fm.pe : '选择日期'"
                    > </el-date-picker>
            </el-form-item>

            <el-form-item :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []" :label="fm.nm + '：'" :key="i" v-else-if="fm.tp == 'year'"  :label-width=" textVal(fm.nm) +'px'">
                <el-date-picker 
                    v-model="fm.va" 
                    type="year" 
                    value-format="yyyy" 
                    @input="fm.cf ? fm.cf() : ''"
                    :format="fm.fm ? fm.fm : 'yyyy'" 
                    :placeholder="fm.pe != '' && fm.pe ? fm.pe : '选择年份'"
                > </el-date-picker>
            </el-form-item>

            <el-form-item :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []" :label="fm.nm + '：'" :key="i" v-else-if="fm.tp == 'monthrange'"  :label-width=" textVal(fm.nm) +'px'">
                <el-date-picker 
                    v-model="fm.va" 
                    type="monthrange" 
                    @input="fm.cf ? fm.cf() : ''"
                    value-format="yyyy-MM" 
                    :start-placeholder="fm.pes != '' && fm.pes ? fm.pes : '开始月份'" 
                    :end-placeholder="fm.pee != '' && fm.pee ? fm.pee : '结束月份'"
                    :range-separator="fm.rs ? fm.rs : '-'"
                > </el-date-picker>
            </el-form-item>

            <el-form-item :prop="'list.'+ i +'.va'" :rules="fm.ru ? fm.ru : []" :label="fm.nm + '：'" :key="i" v-else-if="fm.tp == 'month'"  :label-width=" textVal(fm.nm) +'px'">
                <el-date-picker 
                    v-model="fm.va" 
                    type="month" 
                    value-format="MM" 
                    :format="fm.fm ? fm.fm : 'MM'" 
                    @input="fm.cf ? fm.cf() : ''"
                    :placeholder="fm.pe != '' && fm.pe ? fm.pe : '月份'"
                > </el-date-picker>
            </el-form-item>
        </template>
        
    </el-form>
</template>
<script>
    import vtp from '../ua-vtp/index'
    export default {
        name:"ua-form",
        props:{
            data : {
                type : Object,
                default(){return {};}
            },
            obj : {
                type : String,
                default:''
            },
            className : {
                type : String,
                default:''
            },
            size : {
                type : String,
                default:'small'
            },
        },
        data(){
            return {

            }
        },
        mounted(){
            
            // console.log(this);
        },
        methods: {
            textVal(o){
                return vtp.strToNum(o);
            }
        },
        
    };
</script>
<style lang="scss">
    .el-form-item__label{padding: 0;}
    .input-with-select .el-select .el-input { width: 130px; }
    .input-with-select .el-input-group__prepend { background-color: #fff; }
    .input-with-select .el-input-group__append { background-color: #fff; }
</style>

